<!-- 新建地址页面 -->
<template>
  <AddressTitle action="保存" @behavior="handleBehavior">新建收货地址</AddressTitle>
  <div class="create-address">
    <div class="create-address-info">
      <div class="info-content">
        <span class="info-item">所在城市:</span>
        <input type="text" class="info-text" placeholder="如北京市" v-model="address.city">
      </div>
      <div class="info-content">
        <span class="info-item">小区/大厦/学校:</span>
        <input type="text" class="info-text" placeholder="如理工大学国防科技园" v-model="address.department">
      </div>
      <div class="info-content">
        <span class="info-item">楼号-门牌号:</span>
        <input type="text" class="info-text" placeholder="A号楼B层" v-model="address.houseNumber">
      </div>
      <div class="info-content">
        <span class="info-item">收货人:</span>
        <input type="text" class="info-text" placeholder="请填写收货人的姓名" v-model="address.name">
      </div>
      <div class="info-content">
        <span class="info-item">联系电话:</span>
        <input type="number" class="info-text" placeholder="请填写收货手机号" v-model="address.phone">
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import AddressTitle from './components/addressTitle'
import { post } from '@/utils/request'
import { CREATE_ADDRESS } from '@/api/interface'
// 保存并返回到管理页面
const useBehavior = (router) => {
  const address = reactive({
    city: '',
    department: '',
    houseNumber: '',
    name: '',
    phone: '',
    createdAt: '',
    updatedAt: ''
  })
  const handleBehavior = () => {
    const time = new Date();
    post(CREATE_ADDRESS,{
      city: address.city,
      department: address.department,
      houseNumber: address.houseNumber,
      name: address.name,
      phone: address.phone,
      createdAt: time.toString(),
      updatedAt: time.toString()
    })
    .then(() => router.push({ name: 'address' }))
    .catch(error => console.log(error))
  }
  return { handleBehavior,address }
}
//composition
export default {
  name: 'newAddress',
  components: { AddressTitle },
  setup() {
    const router = useRouter()
    const { handleBehavior,address } = useBehavior(router)
    return { handleBehavior,address }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';
@import '@/styles/theme.scss';

.create-address {
  @include address-layout;
  @include create-edit-address;
}
</style>